<template>
  <div class="note-wrapper">
    <div v-if="this.dataArr.length>0">
      <el-table
        :data="dataArr"
        style="width: 100%;box-sizing: border-box"
        stripe
        class="note-table"
      >
        <el-table-column
          width="130"
          label="是否锁定"
          class="version-table-one"
        >
          <template slot-scope="scope">
            <span :class="getIconClass(scope.row)"></span>
          </template>
        </el-table-column>
        <el-table-column
          width="300"
          label="文件名称"
          class="note-table-one"
        >
          <template slot-scope="scope">
            <span v-html="getFileName(scope.row)"></span>
          </template>
        </el-table-column>
        <el-table-column
          label="更新时间"
          width="250"
        >
          <template slot-scope="scope">
            <p v-html="getUpdateTime(scope.row)"></p>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="250"
        >
          <template slot-scope="scope">
            <p v-html="getCreateTime(scope.row)"></p>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="400"
        >
          <template slot-scope="scope">
            <button class="note-elButton"  @click="clickDownLoad(scope.row)"><i class="icon-ic_download"></i></button><span @click="clickDownLoad(scope.row)">下载</span>
            <!--<button class="note-elButton" @click="clickPre(scope.row)"><i class="icon-ic_edit"></i></button><span @click="clickPre(scope.row)">预览</span>-->
            <button class="note-elButton" v-show="showEdit(scope.row)" @click="clickEditor(scope.row)"><i class="icon-ic_edit"></i></button>
            <span  v-show="showEdit(scope.row)" @click="clickEditor(scope.row)">编辑</span>
            <span  v-show="!showEdit(scope.row)" >被锁定无法编辑</span>
            <!--<button class="note-elButton" @click="clickDelect(scope.row)"><i class="icon-ic_delete"></i></button><span @click="clickEditor(scope.row)">删除</span>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  //  import EmptyView from '../base/emptyView.vue'
  import * as noteApi from '../../api/moudle/noteApi'
  import utils from '../../common/js/utils'

  export default {
    props: {
    },
    components: {
    },
    data() {
      return {
        dataArr: []
      }
    },
    computed: {
    },
    created() {
      this.$nextTick(() => {
        this.getListData()
      })

      this.bus.$on('updateSuccess', () => {
        this.getListData()
      })
    },
    destroyed() {
      this.bus.$off('updateSuccess')
    },
    methods: {
      getListData() {
        noteApi.getNoteList().then((res) => {
          console.log(res)
          this.dataArr = res && res.data
        }, reject => {

        })
      },
      getIconClass(item) {
          if (item.isLock) {
            return 'note-table-one-gray'
          }
        return 'note-table-one-lighting'
      },
      showEdit(item) {
        return !item.isLock
      },
      getFileName(item) {
        return item.fileName
      },
      getUpdateTime(item) {
        let date = new Date(item.updateAt)
        return utils.dateFtt('yyyy-MM-dd hh:mm:ss', date)
      },
      getCreateTime(item) {
        let date = new Date(item.createAt)
        return utils.dateFtt('yyyy-MM-dd hh:mm:ss', date)
      },

      clickDownLoad(item) {
        const a = document.createElement('a')
        let url = item.downloadUrl
        a.setAttribute('href', url)
        a.click()
      },
      clickEditor(item) {
        this.$router.push({
          name: 'Edit',
          params: {noteId: item.fileName}
        })
      }
//      clickDelect(item) {
//        this.$confirm('确认删除？')
//          .then(() => {
//          }).catch(() => {})
//      },
//      getAppSize(size) {
//        return `${(size / 1024 / 1024).toFixed(2)}M`
//      },
    }
  }
</script>

<style lang="scss">
  @import "../../common/scss/base";

  .note-elButton {
    width: 24px;
    height: 24px;
    font-size: 12px;
    border: solid 1px #aaa;
    color: #D5DFED;
    border-radius: 12px;
    margin-right: 6px;
    padding: 0;
    background-color: transparent;
  }
  .note-elButton:hover {
    border-color: $mainColor;
  }
  .note-elButton:hover i:before {
    color: $mainColor;
  }
  .note-elButton i {
    width: 24px;
    height: 24px;
    line-height: 24px;
  }
  .note-elButton i:before {
    color: #aaa;
  }
  .note-wrapper .note-table {
  }
  .note-table-one-gray {
    display: inline-block;
    width: 18px;
    height: 16px;
    background-size: 18px 18px;
    background-image: url("../../assets/sign_grey.png");
  }
  .note-table-one-lighting {
    display: inline-block;
    width: 18px;
    height: 16px;
    background-size: 18px 18px;
    background-image: url("../../assets/sign_now.png");
  }
  .note-wrapper .note-table .cell {
    text-align: center;
  }

</style>
